<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/massage.css">
</head>

<body>
    <div class="header"></div>
    <div class="xian"></div>
    <div class="goodsmassage center">
        <div class="zuo">
            <div id="wrap">
                <div id="small-box">
                    <div id="mask">

                    </div>
                </div>
                <ul>
                    <!-- <li id="li1"></li> -->
                    <!-- <li id="li2"></li>  -->
                    <!-- <li id="li3"></li> -->
                    <li id="li4"></li>
                     <!-- <li id="li5"></li> -->
                </ul>
            </div>
            <div id="big-box"></div>

        </div>
        <div class="you">
            <!-- <h3>成汇玉米热狗肠网兜50支</h3>
            <div class="goodsmass">
                <div class="price">
                    商城价<span>￥50.00</span><br>
                    市场价&nbsp;<del>￥50.00</del>
                </div>
                <div class="goodsnum">
                    累计评价<span>0</span>
                    <span class="s2">|</span>
                    累计销量<span>1332</span>

                </div>
            </div>
            <div class="selectnum">
                数量 <button class="b1">-</button> <input type="text" name="" id="" value="1"><button class="b2">+</button>
            </div>
            <div class="goodsallnum">
                库存&nbsp;&nbsp;<span>767</span>
            </div>
            <div class="tall">
                温馨提示：不支持退换货服务
            </div>
            <div class="buy">
                <button class="btn1">立即购买</button>
                <button class="btn2"><span class="iconfont icon-gouwuche
                    "></span>加入购物车</button>
            </div> -->

        </div>

    </div>
    <div class="goodspic center">
        <span>商品详情</span>
        <div class="xian"></div>
        <div class="img">

        </div>
    </div>

    <footer></footer>
</body>

</html>
<script src="js/jQuery.js"></script>
<script>
    $(".header").load("header.html");
    $("footer").load("fotter.html");
</script>

<script src="js/jQuery.js"></script>
<script src="js/cookie.js"></script>
<script src="js/shopcar.js"></script>
<script>
    //    console.log(location.search.split('=')[1]);
    $(function () {
        getData();
    })
    function getData() {
        $.get('goodsAndShoppingCart/getGoodsInfo.php', {
            goodsId: location.search.split('=')[1]
        },
            function (data) {
                let arr = JSON.parse(data);
                // console.log(arr);
                let str = '';
                let str1 = '';
                str += `<h3>${arr.goodsName}</h3>
            <div class="goodsmass">
                <div class="price">
                    商城价<span>￥${arr.goodsPrice}</span><br>
                    市场价&nbsp;<del>￥${arr.beiyong5}</del>
                </div>
                <div class="goodsnum">
                    累计评价<span>0</span>
                    <span class="s2">|</span>
                    累计销量<span>${arr.beiyong1}</span>

                </div>
            </div>
            <div class="selectnum">
                数量 <button class="b1">-</button> <input type="text" name="" id="in1" value="1"><button class="b2">+</button>
            </div>
            <div class="goodsallnum">
                库存&nbsp;&nbsp;<span>${arr.goodsCount}</span>
            </div>
            <div class="tall">
                温馨提示：不支持退换货服务
            </div>
            <div class="buy">
                <button class="btn1"><a>立即购买</a></button>
                <button class="btn2"><span class="iconfont icon-gouwuche
                    "></span id="shopcars">加入购物车</button>
            </div>
        `
                $('.you').html(str);
                str1 += `<img src="${arr.beiyong2}" >
           <img src="${arr.beiyong3}" >
           <img src="${arr.beiyong4}" >`
                //=================增加=======================
                $(".b2").click(function () {
                    var jia = $("#in1").val();
                    if (jia >= 0) {
                        $("#in1").val(++jia);
                    }
                })
                //=================减少=======================
                $(".b1").click(function () {
                    var jia = $("#in1").val();
                    if (jia > 0) {
                        $("#in1").val(--jia);
                    }
                })

                $(".btn1").click(function () {
                    // console.log(location.search);
                    $.get("goodsAndShoppingCart/addShoppingCart.php", {
                        vipName: getCookie("userna"),
                        goodsId: location.search.split('=')[1],
                        goodsCount: $("#in1").val()
                    },
                        function (data) {
                            console.log(data);
                            // addgoods();
                            $(window).attr("location", "shopcar.html")
                        })

                })

                  
                $(".btn2").click(function () {
                    // console.log(location.search);
                    $.get("goodsAndShoppingCart/addShoppingCart.php", {
                        vipName: getCookie("userna"),
                        goodsId: location.search.split('=')[1],
                        goodsCount: $("#in1").val()
                    },
                        function (data) {
                            console.log(data);
                            // addgoods();
                            $(window).attr("location", "shopcar.html")
                        })

                })

                $('.img').html(str1);


                var oLi = document.getElementsByTagName("li");
                var oB = document.getElementById("small-box");
                var obb = document.getElementById("big-box");
                var li4 = document.getElementById("li4");
                var bb = document.getElementById("big-box");
                var mb = document.getElementById("small-box");
                // #big-box
                // #small-box
                bb.style.backgroundImage = `url(${arr.goodsImg})`;
                mb.style.backgroundImage = `url(${arr.goodsImg})`;
                li4.style.backgroundImage = `url(${arr.goodsImg})`;
                for (let i = 0; i < oLi.length; i++) {
                    oLi[i].onclick = function () {
                        oB.style.backgroundImage = `url(${arr.goodsImg})`;
                        obb.style.backgroundImage = `url(${arr.goodsImg})`;
                        for (let j = 0; j < oLi.length; j++) {
                            if (i == j) {
                                oLi[j].style.boxSizing = "border-box";
                                // oLi[j].style.border = "2px solid red";
                            } else {
                                oLi[j].style.border = "0";
                            }
                        }
                    }
                }
                class fangdajing {
                    constructor(bigbox, smallbox, menban) {
                        this.obig = bigbox;
                        this.osmall = smallbox;
                        this.omeng = menban;
                    }
                    huaru() {
                        let that = this;
                        this.osmall.onmouseover = function () {
                            that.omeng.style.display = "block"
                            that.obig.style.display = "block"
                        }
                    }
                    huachu() {
                        let that = this;
                        this.osmall.onmouseout = function () {
                            that.omeng.style.display = "none"
                            that.obig.style.display = "none"
                        }
                    }
                    move() {
                        let that = this;
                        this.osmall.onmousemove = function (evt) {
                            let e = evt || event;
                            let top = e.pageY - this.offsetTop - that.omeng.offsetHeight / 2 - 260;
                            let left = e.pageX - this.offsetLeft - that.omeng.offsetWidth / 2 - 150;

                            if (top < 0) {
                                top = 0;
                            }
                            let maxheight = this.offsetHeight - that.omeng.offsetHeight;
                            if (top > maxheight) {
                                top = maxheight;
                            }
                            if (left < 0) {
                                left = 0;
                            }
                            let maxwidth = this.offsetWidth - that.omeng.offsetWidth;
                            if (left > maxwidth) {
                                left = maxwidth;
                            }
                            that.omeng.style.top = top + "px";
                            that.omeng.style.left = left + "px"

                            let x = left * that.obig.offsetWidth / that.omeng.offsetWidth;
                            let y = top * that.obig.offsetHeight / that.omeng.offsetHeight;

                            that.obig.style.backgroundPositionX = -x + "px";
                            that.obig.style.backgroundPositionY = -y + "px";
                        }
                    }
                }
                let obig = document.querySelector("#big-box");
                let osmall = document.querySelector("#small-box");
                let omeng = document.querySelector("#mask");

                let fang = new fangdajing(obig, osmall, omeng);
                fang.huaru();
                fang.huachu();
                fang.move();

            })

            // li4.style.backgroundImage: url(${arr.goodsImg});



        //    $("#li4").css{
        //     backgroundImage: url(${arr.goodsImg}),
        //     backgroundSize: 100% 100%
        //    } 

    }

</script>
<script>

</script>